<html>
	<head>
		<title>Simple Tree View</title>
<style type="text/css"> 
	body { 
		font-family:Verdana; font-size:10pt; 
		width:100%%; height:100%%;  
		background-image: url(stone.png);
		padding:10px;
		margin:0;
	}

	.clock {
	   behavior:clock;
	   color:black; /* our behavior will use it for "hands" */
	   width:153px;
	   height:153px;

       /* clock face */	   
	   background-image:url(clock-images/clock-back.png);
	   background-repeat:no-repeat;	   
	   background-position:50% 50%; /* middle center */
	   
	   /* clock glass */	   
	   foreground-image:url(clock-images/clock-fore.png);
	   foreground-repeat:no-repeat;	   
	   foreground-position:50% 50%; /* middle center */
	}	
	
	popup 
	{ 
	  background-image: url(stone-light.png); 
	  padding:4px;
	  border: 1px solid gray;
	}

	
</style>
	</head>
	<body>
		<h1>Clock behavior demo</h1>
		<div class="clock" titleid="popup-clock"></div>
		<p>Place mouse over the clock to see its popup version</p>
	  	<popup id="popup-clock">
		   <div class="clock"></div>
		</popup>
	</body>
</html>
